<template>
	<div id="app"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import request from '@/api/request.js';
import '../assets/iconfont/iconfont.css';
// import dayjs from 'dayjs';

// import {gcj02towgs84} from '@/utils/translate.js'
// import monitor_img from '../assets/monitor.png';

export default {
	data() {
		return {
			// map 地图对象实例
			map: null,
		};
	},
	mounted() {
		this._createBaseMap();
	},
	methods: {
		_createBaseMap() {
			mapboxgl.accessToken =
				'pk.eyJ1IjoiY2hhbnBmIiwiYSI6ImNsNG1qMDExejAwNDgzam8zcGtiMW5sNmwifQ.J4K5kbkjtcAABsmIW7Z0Tw';

			const map = new mapboxgl.Map({
				container: 'app',
				//自己绘制的样式地图令牌
				antialias: true, //抗锯齿
				style: 'mapbox://styles/mapbox/dark-v10',
				center: [114.13982985118895, 22.626926735280392],
				// center: [-75.789, 41.874],
				zoom: 11,
				// maxZoom: 5.99,
				// minZoom: 4,
				// zoom: 5,
			});
			this.map = map;
			window.map = map;

			// zoom变化时打印zoom值
			map.on('zoom', function (e) {
				console.log('zoom :>> ', e.target.getZoom());
			});

			request.get('./nationalBoundary.geojson').then((data) => {
				console.log('data :>> ', data);

				map.on('load', () => {

					map.addLayer({
						id: 'monitor-icons-layer',
						type: 'line',
						source: {
							type: 'geojson',
							data,
						},
						paint: {
							'line-color': "#eeeeee",
							"line-opacity": [
								'interpolate',
								['linear'],
								['zoom'],
								1,
								1,
								9,
								0,
							]
						}
					});
				});
			});
		},
	},
	beforeDestroy() {
		// this.map.removeLayer('custom-vector-tile-layer');
		this.map.remove();
		this.map = null;
	},
};
</script>

<style>
body {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#app {
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
}

.mapboxgl-popup {
	padding-bottom: 12px;
}
</style>
